<template>
  <div class="myContailer">
    <el-row>
      <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="闪屏管理" name="first">
            <!-- <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                <span class="require myVA_M">*</span> 有效期 :
              </el-col>
              <el-col :span="7">
                <el-select 
                  v-model="timeInterval"
                  placeholder="请选择有效期"
                  @change="timeIntervalChange">
                  <el-option
                    v-for="item in timeIntervalSelected"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                <span class="require myVA_M">*</span> 开始时间 :
              </el-col>
              <el-col :span="7">
                <el-date-picker
                  v-model="startTime"
                  type="datetime"
                  format="yyyy-MM-dd hh:mm"
                  value-format="yyyy-MM-dd hh:mm"
                  placeholder="选择开始时间"
                  :disabled="disabled"
                  align="left">
                </el-date-picker>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                <span class="require myVA_M">*</span> 结束时间 :
              </el-col>
              <el-col :span="7">
                <el-date-picker
                  v-model="endTime"
                  type="datetime"
                  format="yyyy-MM-dd hh:mm"
                  value-format="yyyy-MM-dd hh:mm"
                  placeholder="选择结束时间"
                  align="left"
                  :disabled="disabled"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-col>
            </el-row> -->
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                <span class="require myVA_M">*</span> 闪屏图片 :
              </el-col>
              <el-col :span="7">
                <template>
                  <PictureComponent v-if="flag" :DataList="pictureList" @getChildData="getPictureData"></PictureComponent>
                </template>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                <span class="require myVA_M">*</span> 状态 :
              </el-col>
              <el-col :span="7" class="myLineHeight_40px">
                <template>
                  <el-radio-group v-model="status1">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="2">禁用</el-radio>
                  </el-radio-group>
                </template>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :offset="3">
                <el-button type="primary" class="myBgGreen" @click="ok">确 定</el-button>
                <el-button>取 消</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="弹窗管理" name="second">
            <!-- <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                <span class="require myVA_M">*</span> 有效期 :
              </el-col>
              <el-col :span="7">
                <el-select 
                  v-model="timeInterval"
                  placeholder="请选择有效期"
                  @change="timeIntervalChange">
                  <el-option
                    v-for="item in timeIntervalSelected"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                <span class="require myVA_M">*</span> 开始时间 :
              </el-col>
              <el-col :span="7">
                <el-date-picker
                  v-model="startTime"
                  type="datetime"
                  format="yyyy-MM-dd hh:mm"
                  value-format="yyyy-MM-dd hh:mm"
                  placeholder="选择开始时间"
                  :disabled="disabled"
                  align="left">
                </el-date-picker>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                <span class="require myVA_M">*</span> 结束时间 :
              </el-col>
              <el-col :span="7">
                <el-date-picker
                  v-model="endTime"
                  type="datetime"
                  format="yyyy-MM-dd hh:mm"
                  value-format="yyyy-MM-dd hh:mm"
                  placeholder="选择结束时间"
                  align="left"
                  :disabled="disabled"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-col>
            </el-row> -->
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                <span class="require myVA_M">*</span> 单人单日上限 :
              </el-col>
              <el-col :span="7">
                <el-input placeholder="单人单日上限" v-model="top_limit"></el-input>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                <span class="require myVA_M">*</span> 跳转值 :
              </el-col>
              <el-col :span="7">
                <el-input placeholder="跳转值" v-model="pop_url"></el-input>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                <span class="require myVA_M">*</span> 闪屏图片 :
              </el-col>
              <el-col :span="7">
                <el-upload
                  class="avatar-uploader"
                  :disabled="is_modifly"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :data="postData"
                  :on-success="handleAvatarSuccess">
                  <img v-if="thumbnailUrl" :src="thumbnailUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                <span class="require myVA_M">*</span> 状态 :
              </el-col>
              <el-col :span="7" class="myLineHeight_40px">
                <template>
                  <el-radio-group v-model="status2">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="2">禁用</el-radio>
                  </el-radio-group>
                </template>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :offset="3">
                <el-button type="primary" class="myBgGreen" @click="ok">确 定</el-button>
                <el-button>取 消</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-row>
  </div>
</template>

<style scoped>
  .myContailer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<script>
  import PictureComponent from 'components/PictureComponent.vue';
  import { getQNToken , getFlash , updateFlash } from '@/api/contentMGT';
  import { QINIU_API , QINIU_UP_API } from '@/config/baseUrl';
  export default {
    data(){
      return{
        title: "闪屏管理",
        activeName:"first",
        timeInterval:"",
        timeIntervalSelected:[
          { label:'长期', value:"1" },
          { label:'指定时段', value:"2" }
        ],
        startTime:"",
        endTime:"",
        pickerOptions: {
          disabledDate(time) {
            // return time.getTime();
          }
        },
        status1:1,
        status2:1,
        disabled:true,
        thumbnailUrl:"",
        is_modifly:false,
        postData:{
          token:""
        },
        uploadUrl:QINIU_UP_API,
        pictureList:[],
        pictureData:[],
        flash_type:1,
        flag:false,
        pop_url:"",
        top_limit:""
      }
    },
    components: {
      PictureComponent  
    },
    created(){
      this.onGetToken();
    },
    mounted(){
      this.ongetFlash();
    },
    methods:{  
      onGetToken(){//拉取七牛token
        let vm=this;
        getQNToken().then(response => {
          let res=response.data.up_token;
          vm.postData.token=res;
        }).catch(error => {
        })
      },
      handleAvatarSuccess(res, file) {
        this.thumbnailUrl = QINIU_API + res.key;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG) && isLt2M;
      },
      ongetFlash(){
        this.flag=false;
        getFlash(this.flash_type).then(response => {
          let res=response.data;
          if(this.flash_type==1){
            this.pictureList=res.attachList;
            this.status1=res.status;
            this.flag=true;
          }else if(this.flash_type==2){
            this.status2=res.status;
            this.thumbnailUrl=res.pop_img;
            this.pop_url=res.pop_url;
            this.top_limit=res.top_limit;
          }
        }).catch(error => {
        })
      },
      handleClick(tab, event) {
        if(tab.name=='first'){
          this.flash_type=1;
        }else if(tab.name=='second'){
          this.flash_type=2;
        }
        this.ongetFlash();
      },
      timeIntervalChange(val){
        if(val==1){
          this.disabled=true;
        }else{
          this.disabled=false;
        }
      },
      getPictureData(val){
        this.pictureData=val;
      },
      ok(){
        let vm=this;
        let params=null;
        if(vm.flash_type==1){
          let newObj=JSON.parse(JSON.stringify(vm.pictureData));
          for(let i=0 ; i<vm.pictureData.length; i++){
            if(!vm.pictureData[i].img_url){
              vm.$message.info("不能有空图片！");
              return;
            }
            let list=vm.pictureData[i].img_url.split('/');
            newObj[i].img_url=list[list.length-1];
          }
          params={
            attachList:newObj,
            status:vm.status1
          }
        }else if(vm.flash_type==2){
          let requestThumbnailUrl='';
          let list=vm.thumbnailUrl.split('/');
          requestThumbnailUrl=list[list.length-1];
          params={
            pop_img:requestThumbnailUrl,
            pop_url:vm.pop_url,
            status:vm.status2,
            top_limit:vm.top_limit
          }
        }
        updateFlash(vm.flash_type,params).then(response => {
          vm.$message.success("执行成功！");
          //vm.ongetFlash();
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },

    }
  
  }


</script>



